<template>
	<view class="container">
		<view class="introduction" v-show="childrens!=[]">
			<view class="all" @click="open">
				<!-- <text>{{$props.select1}}</text> -->
				<view class="tabar">
					<uv-action-sheet ref="actionSheet" :closeOnClickOverlay="false" :safeAreaInsetBottom="true"
						:actions="cardItem" @select="select" @close="close">
					</uv-action-sheet>
				</view>

				<!-- <uv-image src="../../static/下三角.png" width="32rpx" height="32rpx"></uv-image> -->
			</view>
			<uv-checkbox-group shape="circle" v-model="selectAll">
				<view class="resources1">
					<view class="books-container" v-for="(item, index) in childrens" :key="index">

						<view class="books">
							<view style="position: absolute;z-index: 9999;">
								<uv-checkbox class="select_item" v-if="!visvible" @change="click(item.collectId)"
									:name="item.collectId"></uv-checkbox>
							</view>

							<image radius="10rpx" width="325rpx" height="208rpx" :src="item.cover" @click="tiao(item)"
								style="border: 10rpx;width: 208rpx;height: 300rpx;box-shadow: 2px 2px 5px rgba(0, 0, 0.2, 0.5)">
							</image>
							<view class="text-wrapper" style="width: 208rpx;">
								<text class="ellipsis">
									{{item.resourceName}}
								</text>
							</view>
							<view class="icon-wrapper" v-if="isTrue">
								<image class="icons" :src="playUrl"></image>
							</view>
							<!-- v-if="edit==false" -->
						</view>
					</view>
					<uv-tabbar v-if="!visvible" class="jcontainer" :custom-style="{
							flex:0
						}">
						<view class="select_all">
							<uv-checkbox-group shape="circle">
								<uv-checkbox :customStyle="{marginBottom: '8px'}" @change="selectToAll" label="全选"
									name="全选"></uv-checkbox>
							</uv-checkbox-group>

							<view class="canel">
								<uv-modal ref="modal" title="标题" content='不知天上宫阙，今夕是何年'></uv-modal>
								<text @click="edit3(visvible)">取消</text>
							</view>
							<view class="del_button">
								<uv-button size="large" text="删除" :icon="del" :custom-style="customStyle2"
									@click="delete3" color="#F2F3F5"></uv-button>
							</view>
						</view>
					</uv-tabbar>
				</view>
			</uv-checkbox-group>
		</view>
		<view class="list_container" v-show="childrens==[]">
			<image src="../../static/空数据.png" style="width:750rpx ;height:560rpx ;margin-top: 160rpx;">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		object
	} from '../../uni_modules/uv-ui-tools/libs/function/test';
	import useGetGlobalProperties from '@/util/useGlobal.js'
	export default {
		props: {
			customStyle2: {
				type: Object,
				required: true,
			},
			data: {
				type: Object,
				required: true,
			},
			height: {
				type: String,
				default: '292rpx'
			},
			width: {
				type: String,
				default: '208rpx'
			},
			isTrue: {
				type: Boolean
			},
			edit: {
				type: Boolean,
				default: false
			},
			cardItem: {
				type: Object,
				required: true,
			},
			selectCheck: {
				type: Array,
				default: []
			},
			clear: {
				type: Boolean
			}
		},
		watch: {
			data: {
				handler(newData, oldData) {
					// 在 data 属性变化时执行的逻辑
					this.childrens = newData;
					console.log('newData', newData)

					// 进行其他逻辑操作...
				},
				deep: true, // 深度监听，如果 data 是一个对象或数组
			},
			edit: {
				handler(newEditValue, oldEditValue) {
					// 在 data 属性变化时执行的逻辑
					this.visvible = newEditValue;
					console.log('newEditValue', newEditValue)

					// 进行其他逻辑操作...
				}
			},
		},
		data() {
			return {
				customStyle: {
					boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)',
					marginLeft: '150rpx'
				},
				playUrl: 'http://61.163.243.7:9999/digitallibrary/bookExposure/lengleng/video/wx/imagPlay.png',
				del: 'http://61.163.243.7:9999/digitallibrary/bookExposure/lengleng/video/wx/delete.png',
				visvible: true,
				http: '',
				selectAll: [],
				clear: false,
				selectObj: [],
				childrens: [{
						id: 2056,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '西方政治',
						author: '谷春德、吕世伦',
						desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
					},
					{
						id: 456,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '雷锋精神',
						author: '《雷锋全集》编写组',
						desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
					},
					{
						id: 3213,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '用法读本',
						author: '农业部人事劳动司、农业部产业政策与法规司',
						desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
					},
					{
						id: 144423,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '雷锋精神',
						author: '《雷锋全集》编写组',
						desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
					},
					{
						id: 1312412423,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '西方政治',
						author: '谷春德、吕世伦',
						desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
					},
					{
						id: 775675,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '雷锋精神',
						author: '《雷锋全集》编写组',
						desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
					},
					{
						id: 987,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '用法读本',
						author: '农业部人事劳动司、农业部产业政策与法规司',
						desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
					},
					{
						id: 9675,
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '雷锋精神',
						author: '《雷锋全集》编写组',
						desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
					},
					{
						id: 5436,
						url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
						name: '用法读本',
						author: '农业部人事劳动司、农业部产业政策与法规司',
						desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
					}
				]
			}
		},
		mounted() {
			this.init();
		},
		methods: {

			tiao(i) {

				const book = uni.getStorageSync('book')
				const audio = uni.getStorageSync('audio')
				const journal = uni.getStorageSync('journal')
				let urls = '';
				if (i.dataTypeId == book) {
					urls = '/pages/index/bookDetail/bookDetail?id=' + i.resourceId
				} else if (i.dataTypeId == audio) {
					urls = '/pages/index/audioDetails/audioDetails?id=' + i.resourceId
				} else if (i.dataTypeId == journal) {
					urls = '/pages/index/journalDetails/journalDetails?id=' + i.resourceName
				}
				uni.navigateTo({
					url: urls
				})

			},
			init() {
				this.visvible = this.$props.edit;
				console.log('vvv', this.visvible)
				const urlsd = useGetGlobalProperties().$https;
				this.http = urlsd;
				console.log('ddd', this.$props.data)
				this.childrens = this.$props.data;
				console.log("1112323", this.selectAll);
				// const that = this;
				// uni.request({
				// 	url:''
				// })
			},
			selectToAll() {
				const that = this;
				console.log("1112323", this.selectAll);
				if (that.clear) {
					that.selectAll = [];
					that.clear = false;
					console.log("select1", that.selectAll);
					return;
				}
				that.selectAll = [];
				for (let i = 0; i < that.childrens.length; i++) {
					that.selectAll.push(that.childrens[i].collectId);
				}
				that.clear = true;
				console.log("select", that.selectAll);

				// console.log("1112323", this.selectCheck);
				// if (this.$props.clear) {
				// 	this.$props.selectCheck = [];
				// 	this.$emit('ToFalse')
				// 	console.log("select123123", this.selectCheck);
				// 	return;
				// }
				// this.$props.selectCheck = [];
				// for (let i = 0; i < this.data.childrens.length; i++) {
				// 	this.$props.selectCheck.push(this.data.childrens[i].id);
				// }
				// // this.$props.clear = true;
				// this.$emit('ToTrue')
				// console.log("select", this.selectCheck);
				// console.log("clear", this.$props.clear);
			},
			click(e) {
				// this.$emit('customEvent', e);
				console.log('eId', e)
				var l = this.selectAll.indexOf(e);
				if (l == -1) {
					this.selectAll.push(e);
					console.log(this.selectAll)
					return;
				}
				this.selectAll.splice(l, 1);
				console.log('selectAll', this.selectAll)
			},
			delete3() {
				if (this.selectAll == []) {
					uni.showToast({
						title: '请选择要删除的资源',
						duration: 2000,
						icon: 'error'
					});
					return;
				}
				uni.showLoading({
					title: '正在加载中'
				})
				uni.request({
					url: this.http + '/wxApi/collect/removeById',
					method: 'POST',
					data: this.selectAll,
					success: (res) => {
						console.log('start', res.data)
						this.$emit('flush');
						this.init();
						uni.showTabBar();
						uni.hideLoading()
					}
				})
				// uni.showModal({
				// 	title: '提示',
				// 	content: '是否要删除该资源?',
				// 	success: function(res) {
				// 		console.log('modal',res)
				// 		if (res.confirm) {
				// 			console.log('modal',res)

				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });

			},
			open() {
				this.$refs.actionSheet.open();
				uni.hideTabBar();
			},
			select(e) {
				this.$emit('update:select', e); // 触发事件更新父组件属性
				uni.showTabBar();

				console.log("选中该项：", e.name);
			},
			close() {
				uni.showTabBar();
				console.log("关闭");
			},
			edit3(e) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '是否取消编辑',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							e = true;
							that.selectAll == [];
							that.visvible = true;
							uni.showTabBar();

							that.$emit('editsM');
						} else if (res.cancel) {
							console.log('用户点击取消');
							uni.hideTabBar();
						}
					}
				});
			}
		},
	};
</script>

<style scoped>
	.ellipsis {
		width: 110px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		margin-top: 8%;
	}

	.icons {
		width: 55rpx;
		height: 57rpx;
	}

	.del_button {
		margin-left: 38rpx;
		position: relative;
		bottom: 18rpx;
		left: 75%;
	}

	.canel {
		position: relative;
		left: 70%;
		/* 		margin-left: 85%; */
		font-size: 26rpx;
		padding-bottom: 8rpx;
		color: #86909C;
	}

	.select_all {
		margin-top: 50rpx;
		margin-left: 40rpx;
		display: flex;

	}

	.select_item {}

	.tabar {}

	.icon {
		width: 42rpx;
		height: 40rpx;
	}

	.icon-wrapper {
		position: absolute;
		bottom: 0rpx;
		left: 150rpx;
	}

	.text-wrapper {
		display: flex;
		align-items: center;
		text-align: center;
		margin-left: 0rpx;
		/* 文字左对齐 */
	}

	.resources1 {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
	}

	.books-container {
/* 		width: calc(100% / 3 - 20px);
		margin-right: 20px;
		margin-bottom: 30px; */
	}

	.books {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-bottom: 30rpx;
		padding-left: 25rpx;
		position: relative;
	}


	.all {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 32rpx;
	}

	.container {
		font-family: my-font;
		padding-bottom: 200rpx;
	}
</style>